@import './reset';
@function getVw($w) {
  @return calc($w/375) * 100 + vw;
}
$fontColor: #555555;
.wrap {
  header {
    nav {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      margin: getVw(15) 0;
      .back {
        font-size: getVw(22);
        margin-left: getVw(10);
      }
      h2 {
        flex-grow: 1;
        font-size: getVw(16);
        color: $fontColor;
        margin-left: calc(50% + getVw(22));
        transform: translateX(-50%);
      }
    }
  }
  main {
    .Uwant {
      .wantItem {
        display: flex;
        align-items: center;
        margin-bottom: getVw(23);
        border-top: 1px solid #e9ecf0;
        .check {
          padding-left: getVw(15);
          input {
            width: getVw(15);
            height: getVw(15);
            // -webkit-appearance: none;
            // -webkit-box-shadow: none;
            background-color: #fff;
            border: 1px solid #000;
            border-radius: getVw(3);
            // &:active{
            //   &::after{
            //     content:'√'

            //   }
            // }
          }
        }
        .imgBox {
          padding-top: getVw(15);
          img {
            width: getVw(133);
            height: getVw(133);
            margin-left: getVw(15);
          }
        }
        .spec {
          display: flex;
          flex-direction: column;
          padding-top: getVw(50);
          margin-left: getVw(10);
          .name {
            font-size: getVw(16);
            margin-bottom: getVw(5);
          }
          .info {
            p {
              font-size: getVw(14);
              margin-top: getVw(8);
            }
            & p:nth-last-child(2) {
              span {
                color: #555555;
                text-decoration: line-through;
              }
            }
            & p:last-child {
              span {
                color: #ff2222;
              }
            }
          }
        }
      }
    }
    .UMLike {
      width: 100%;
      background-color: #f7f8f8;
      border-top: 12px solid #e9ecf0;
      .title {
        padding-top: getVw(15);
        margin-left: getVw(15);
        margin-bottom: getVw(15);
        p {
          font-size: getVw(17.5);
          // margin-top: getVw(15);
        }
      }
      .flowers {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        li {
          margin-bottom: getVw(10);
          margin-left: getVw(10);
          width: getVw(165);
          margin-right: getVw(12);
          background-color: #fff;

          img {
            display: block;
            width: getVw(165);
            height: getVw(165);
          }
          h3 {
            font-size: getVw(14);
            font-weight: normal;
            padding-left: getVw(10);
            padding-top: getVw(19);
          }
          .price {
            display: flex;
            justify-content: space-between;
            padding-top: getVw(5);
            margin-bottom: getVw(6);
            
            h4 {
              font-size: getVw(14);
              font-weight: normal;
              margin-left: getVw(5);
              color: #ff734c;
            }
            p {
              margin-left: getVw(5);
              font-size: getVw(12);
              color: #999999;
            }
          }
        }
        & li:last-child {
          margin-bottom: getVw(61);
        }
      }
    }
   
  }
}
.pay {
  // margin-top:getVw(61) ;
  background-color: #fff;
  width:100%;
  position: fixed;
  bottom:0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .sum {
    color: #884e22;
    padding-left: getVw(15);
  }
  .gopay {
    // float: inline-end;
    button {
      width: getVw(105);
      height: getVw(50);
      border: 0;
      line-height: getVw(50);
      background-color: #884e22;
      text-align: center;
      color: #fff;
    }
  }
}
